<template>
  <div class="app-container">
    <el-form :inline="true" ref="refForm" :model="form">
      <el-form-item label="账户类型：" prop="userType">
        <el-select v-model="form.userType" style="width: 120px;">
          <el-option
            v-for="item in consts.ACCOUNT_TYPE"
            :value="item.value"
            :label="item.title"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账号名：" prop="userName">
        <el-input v-model="form.userName" @keyup.enter.native="submitFilterForm"></el-input>
      </el-form-item>
      <el-form-item label="登录端：" prop="clientType">
        <el-select v-model="form.clientType" style="width: 120px;">
          <el-option
            v-for="item in consts.PAYMENT_PLATFORM"
            :value="item.value"
            :label="item.title"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
      <el-button @click="resetForm('refForm')">重置</el-button>
    </el-form>
    <div class="onlineTotal">
      当前在线总人数：{{tableData.total}}人
      <!--<el-button class="filter-item" type="text" @click="checkDetail('activeUser')">查看详细数据</el-button>-->
    </div>
    <el-table
      border
      :data="tableData.list"
      v-loading="loading"
      element-loading-text="加载中..."
      class="el-table-align-center">
      <el-table-column label="账户名" prop="username" width="180" align="center">
      </el-table-column>
      <el-table-column prop="user_type" label="账户类型" align="center">
        <template slot-scope="{row}">
          {{row.user_type | toConverter('ACCOUNT_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column prop="register_date" label="注册时间" align="center">
        <template slot-scope="{row}">
          {{row.register_date | toTime}}
        </template>
      </el-table-column>
      <el-table-column prop="client_type" label="登录端" align="center">
        <template slot-scope="{row}">
          {{row.client_type | toConverter('DEVICE_TYPE')}}
        </template>
      </el-table-column>
    </el-table>
     <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
    <custom-dialog :visible="visibleDialog=='activeUser'" returnButtonName="返回" :callback="closeDialog">
      <div slot="title">活跃用户明细</div>
      <active-user-detail v-if="visibleDialog=='activeUser'" :time="dialogProps"></active-user-detail>
    </custom-dialog>
  </div>
</template>

<script>
  import {getOnlineUserApi as listApi} from "@/services/api/operational";
  import {grid} from '@/build'
  import activeUserDetail from '../detail/activeUserDetail'

  export default {
    name: "register-rate",
    mixins: [grid],
    components: {activeUserDetail},
    data() {
      return {
        tableData: [],
        form: {
          time: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
          userType: null,
          clientType: null,
          userName: null,
        },
        visibleDialog: undefined,
        dialogProps: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
        filters: {
          page:1,
          size:20,
          // stime: moment().valueOf(),
          // etime: moment().valueOf()+ 86399999,
        },
      }
    },
    methods: {
      selfResetForm(formName) {
        this.resetForm(formName);
        this.submitFilterForm();
      },
      submitFilterForm() {
        const {userType, clientType, userName} = this.form;

        this.filters = {...this.filters, userType, clientType, userName, project: consts.PLATFROM_PREFIX}
        // 搜索 全部 的时候 userType 不用传
        if (this.filters.userType == -1) delete this.filters.userType
        if (this.filters.clientType == -1) delete this.filters.clientType
        this.gridSearch()
      },
      getSummaries(param) {
        const {columns, data} = param;
        const sums = [];

        columns.forEach((column, index) => {
          const values = data.map(item => Number(item[column.property]));
          if (index === 0) {
            sums[index] = '汇总';
            return;
          } else if ([1, 2].indexOf(index) !== -1 && !values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else if (index == 3) {
            sums[index] = _.formatDiv(sums[2], sums[1] + sums[2], {fixed: 2});
          } else {
            sums[index] = '';
          }
        });

        return sums;
      },
      // 打开弹窗
      checkDetail(visibalDialog) {
        this.visibleDialog = visibalDialog;
      },
      // 关闭弹窗
      closeDialog() {
        this.visibleDialog = undefined;
      }
    },
    mounted() {

      this.bindGet(listApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        // format: data => {
        //   let result = [];
        //   _.forIn(data, (value, key) => {
        //     result.push({...value, date: key, regRate: _.formatDiv(value.reg, (value.ip + value.reg), {fixed: 2})})
        //   })
        //   return result;
        // }
      });
      this.submitFilterForm();
    }

  }
</script>

<style scoped>

</style>
